<template>
  <Error>
    <fieldset>
      <legend>App组件</legend>
      <!-- <customDirective/> -->
      <!-- <setup :num="num">
        <h1>一个插槽</h1>
    </setup> -->
      <!-- <refCom></refCom> -->
      <!-- <reactiveCom></reactiveCom>
    <methodsCom></methodsCom> -->
      <!-- <defineApi></defineApi> -->
      <!-- <computedCom></computedCom> -->
      <!-- <todolist></todolist> -->
      <!-- <watchCom :testVal="testVal" :textVal2="testVal2"></watchCom> -->
      <!-- <watchEffectCom></watchEffectCom> -->
      <!-- <watchEffectExam></watchEffectExam> -->
      <customDirective></customDirective>
    </fieldset>
  </Error>
</template>
<script setup>
// import customDirective from "./components/CustomDirective.vue";
// import setup from "./components/setup.vue";
// import refCom from "./components/ref.vue";
// import reactiveCom from "./components/reactive.vue";
// import methodsCom from "./components/methods.vue";
// import defineApi from "./components/defineApi/index.vue"
// import computedCom from "./components/computed.vue"
// import todolist from "./components/todolist/index.vue";

import Error from "./components/Error.vue"
import watchCom from "./components/watchCom.vue"
import watchEffectCom from './components/watchEffect.vue'
import watchEffectExam from "./components/watchEffect失效函数的应用.vue"
import customDirective from "./components/自定义指令.vue"
import {ref} from 'vue'
let testVal = ref('德国')
let testVal2 = ref('日本')
</script> 